<template>
  <div class="video">
    <el-upload
      class="upload-demo"
      drag
      :action="action"
      :headers="headers"
      :on-success="success"
      :on-error="error"
      accept="video/*"
      :on-progress="progress"
      :on-change="onChangeData"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传{{ typeList.join(', ') }}视频文件, 上传视频比较慢,请等到"上传成功提示"</div>
    </el-upload>
    <div class="right">
      <video ref="videoRef" class="item" controls v-if="url && url.length > 0">
        <source :src="url" type="video/mp4" />
        不支持mp4视频
      </video>
      <el-progress :stroke-width="6" :percentage="progressPercent" :format="formatProgress"></el-progress>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import api from '@/api'

export default {
  computed: {
    headers() {
      return {
        // 'X-Admin-YANG': getToken()
        [process.env.VUE_APP_TOKEN]: getToken(),
        // 'Content-Type': 'multipart/form-data'
      }
    }
  },
  props: ['product_id'],
  data() {
    return {
      action: `${process.env.VUE_APP_BASE_API}/api/upload/video?product_id=${this.product_id}`,
      typeList: [
        'mp4'
      ],
      url: '',
      progressPercent: 0
    }
  },
  methods: {
    success(response, file, fileList) {
      const { code, message, data } = response
      if (code === 0) {
        this.$message({
          // message: message || '上传成功',
          message: '上传成功',
          type: 'success'
        })
        // console.log(data)
        // this.url = 'http://9q.api:9988' + (data.list.full_name)
        this.url = data.list.full_name
        this.progressPercent = 100
        // 动态改变需要这样处理
        this.$refs.videoRef.load()
        // this.$refs.videoRef.play()
      } else {
        this.$message({
          message: (message && `上传失败,失败原因:${message}`) || '上传失败',
          type: 'error'
        })
      }
    },
    error(err, file, fileList) {
      const errMsg = err.message && JSON.parse(err.message)
      this.$message({
        message: (errMsg && errMsg.msg && `上传失败,失败原因:${errMsg.msg}`) || '上传失败',
        type: 'error'
      })
    },
    progress(event, file, fileList) {
      // console.log(event, file, fileList)
      this.progressPercent = Math.floor((event.loaded / event.total) * 100)
      // console.log(this.progressPercent)
    },
    formatProgress(percentage) {
      return `${percentage}%`
    },
    onChangeData(file, fileList) {
      if (file.status === 'uploading' || file.status === 'ready') {
        this.progressPercent = 0
        const interval = setInterval(() => {
          console.log(this.progressPercent)

          if (this.progressPercent >= 98) {
            return clearInterval(interval)
          }
          this.progressPercent += 1
        }, 200)
      }
      if (file.status === 'success') {
        // this.progressPercent = 100
      }
    }
  },
  created() {
    if (this.product_id > 0) {
      api.product.video({ id: this.product_id }).then(response => {
        const { data } = response
        this.url = data.url
      })
    }
  }
}
</script>

<style scoped lang="scss">
.video {
  display: flex;
  .upload-demo {
    margin-left: 30px;
  }
  .item {
    margin-left: 10px;
    width: 200px;
    height: 200px;
    //background: red;
  }
}
</style>
